<template>
  <div class="Shop_Detail">
    <Header></Header>
    <div class="Shop_Detail_PC">
      <div class="content">
        <!-- 股票详情 -->
        <div class="display_num1">
          <div class="left">
            <div class="header">
              <!-- 标签 -->
              <div class="title">
                <h2>{{strategy_info.name}}</h2>
                <el-tag>多因子</el-tag>
                <el-tag type="success">期权</el-tag>
                <el-tag type="info">对冲</el-tag>
                <el-tag type="warning">高成长</el-tag>
                <el-tag type="danger">高风险</el-tag>
              </div>
              <ul class="sell">
                <li>
                  策略售价:
                  <span class="big-red">&nbsp;￥{{strategy_info.price}}元/月</span>
                </li>
                <li>
                  适合资金：
                  <span class="black">&nbsp;&nbsp;{{strategy_info.suitableFund}}</span>
                </li>
              </ul>
            </div>
            <ul>
              <li>
                <p class="title">累计收益</p>
                <p class="content red">{{strategy_info.realIncome}}</p>
              </li>
              <li>
                <p class="title">胜率</p>
                <p class="content">{{strategy_info.Victories}}</p>
              </li>
              <li>
                <p class="title">盈亏比</p>
                <p class="content">{{strategy_info.vRate}}</p>
              </li>
              <li>
                <p class="title">最大回撤</p>
                <p class="content">{{strategy_info.maxRetracement}}</p>
              </li>
            </ul>
            <ul>
              <li v-for="(item,index) in strategy_info.monthsIncome" :key="index">
                <p>
                  {{item.month}}
                  <span class="red">{{item.income}}</span>
                </p>
              </li>
            </ul>
          </div>
          <div class="right">
            <div class="echart1_1" ref="echart1_1"></div>
            <p>
              已经超过了
              <span class="median-red">{{strategy_info.Victories}}</span>的策略
            </p>
            <div class="button-box">
              <el-button type="danger" plain>免费咨询</el-button>
              <el-button type="danger">立即订阅</el-button>
            </div>
          </div>
        </div>

        <!-- 买入牛股 -->
        <el-card class="box-card display_num2">
          <div slot="header" class="clearfix">
            <span>买入牛股</span>
            <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
          </div>
          <transition-group
            tag="div"
            class="super-stock-box"
            enter-active-class="fadeIn"
            leave-active-class="fadeOut"
            :duration="{enter:1000,leave:1000}"
          >
            <Super_Stock_Card
              class="Super_Stock_Card animated"
              v-for="item in Super_Stock_Card_List"
              :key="item.id"
              :cardInfo="item"
            ></Super_Stock_Card>
          </transition-group>
        </el-card>

        <!-- 策略信息 -->
        <div class="display_num3">
          <div class="left">
            <h4>策略信息</h4>
            <div class="echart1_2" ref="echart1_2"></div>
            <ul class="detail">
              <li>
                <p class="title">交易标的：</p>
                <p class="content">{{strategy_info.category}}</p>
              </li>
              <li>
                <p class="title">交易时间：</p>
                <p class="content">{{strategy_info.dealDate}}</p>
              </li>
              <li>
                <p class="title">交易频率：</p>
                <p class="content">{{strategy_info.frequency}}</p>
              </li>
              <li>
                <p class="title">同时持股数：</p>
                <p class="content">{{strategy_info.maxStocksNum}}</p>
              </li>
              <li>
                <p class="title">开始时间：</p>
                <p class="content">{{strategy_info.startDate}}</p>
              </li>
            </ul>
          </div>
          <div class="right">
            <h4>模拟交易收益率</h4>
            <div class="echart1_3" ref="echart1_3"></div>
          </div>
        </div>

        <!-- 策略持仓 -->
        <div class="display_num4">
          <h4>
            <span>策略持仓</span>
          </h4>
          <div class="line-text">
            <div class="text">当前持仓</div>
            <div class="line"></div>
            <div class="history">
              <div class="text">历史持仓</div>
              <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            </div>
          </div>
          <el-table :data="currRepositoryData" stripe style="width: 100%">
            <el-table-column prop="name" label="股票" width="200"></el-table-column>
            <el-table-column prop="number" label="数量" width="140"></el-table-column>
            <el-table-column prop="mcapitalization" label="市值" width="140"></el-table-column>
            <el-table-column prop="cvalue" label="成本价" width="140"></el-table-column>
            <el-table-column prop="pvalue" label="现价" width="140"></el-table-column>
            <el-table-column prop="position" label="仓位" width="140"></el-table-column>
            <el-table-column prop="todaypal" label="当日盈亏" width="140"></el-table-column>
            <el-table-column prop="totalpal" label="累计盈亏" width="140"></el-table-column>
          </el-table>
          <div class="brick"></div>
          <div class="line-text">
            <div class="text">最新调仓</div>
            <div class="line"></div>
            <div class="history">
              <div class="text">历史调仓</div>
              <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            </div>
          </div>
          <el-table :data="adjustRepositoryData" stripe style="width: 100%">
            <el-table-column prop="name" label="股票" width="200"></el-table-column>
            <el-table-column prop="date" label="时间" width="200"></el-table-column>
            <el-table-column prop="sellOrBuy" label="操作" width="190"></el-table-column>
            <el-table-column prop="num" label="数量" width="180"></el-table-column>
            <el-table-column prop="position" label="仓位" width="170"></el-table-column>
            <el-table-column prop="averagePrice" label="成交均价" width="190"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="Shop_Detail_Mobile">
      <div class="trend-box shadow-border">
        <div class="title">{{strategy_info.name}}</div>
        <div class="echart2_1" ref="echart2_1"></div>
      </div>
      <div class="introduce shadow-border">
        <div class="income-part">
          <div class="left">
            <div class="title">累计收益</div>
            <div class="content big-red">{{strategy_info.realIncome}}</div>
          </div>
          <div class="right">
            <div class="echart2_2" ref="echart2_2"></div>
            <div class="explain">
              已经超过了
              <span class="median-red">{{strategy_info.Victories}}</span>的策略
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <ul class="months-income">
          <li v-for="(item,index) in strategy_info.monthsIncome" :key="index">
            <div class="title">{{item.month}}</div>
            <div class="content">{{item.income}}</div>
          </li>
        </ul>
      </div>
      <div class="detail-box num1 shadow-border">
        <div class="title">当前持仓</div>
        <el-table :data="currRepositoryDataMobile" stripe style="width: 100%">
          <el-table-column prop="name" label="股票" width="160"></el-table-column>
          <el-table-column prop="numberAndmcapitalization" label="数量/市值" width="160"></el-table-column>
          <el-table-column prop="cValueAndPValue" label="成本/现价" width="160"></el-table-column>
          <el-table-column prop="totalpal" label="盈亏"></el-table-column>
        </el-table>
      </div>
      <div class="detail-box num2 shadow-border">
        <div class="title">当前持仓</div>
        <el-table :data="adjustRepositoryDataMobile" stripe style="width: 100%">
          <el-table-column prop="name" label="股票" width="160"></el-table-column>
          <el-table-column prop="sellOrBuy" label="操作" width="160"></el-table-column>
          <el-table-column prop="position" label="仓位" width="160"></el-table-column>
          <el-table-column prop="averagePrice" label="成交均价"></el-table-column>
        </el-table>
      </div>
      <div class="operate">
        <el-button class="consult" type="danger" plain>免费咨询</el-button>
        <el-button class="subscribe" type="danger">立即订购</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";
import Super_Stock_Card from "@/components/cards/Super_Stock_Card.vue";
// import { constants } from "crypto";
var echarts = require("echarts");
export default {
  name: "Shop_Detail",
  data() {
    return {
      strategy_info: {
        id: 1,
        name: "行业轮动策略",
        tags: ["小市值", "收益高", "赚钱", "跑赢指数", "股票少"],
        realIncome: "20%",
        realDays: "3",
        todayIncome: "-1.2%",
        Victories: "75,71%",
        vRate: "1103.46%",
        maxRetracement: "16.95%",
        price: "800",
        suitableFund: "10-30万",
        remaining: "27",
        monthsIncome: [
          {
            month: "最近一月",
            income: "5.13%"
          },
          {
            month: "最近三月",
            income: "30.59%"
          },
          {
            month: "最近六个月",
            income: "86.81%"
          },
          {
            month: "最近一年",
            income: "86.81%"
          }
        ],
        category: "主板上市股票",
        dealDate: "2019-07-09",
        frequency: "1-5次/周",
        maxStocksNum: "1-3只",
        startDate: "2019-02-14",
        date: ["2018", "2019", "2020"],
        strategyIncome: [23, 34, 12],
        baseIncome: [1, 1.2, 0.5],
        introduce: "这是书记的策略",
        currRepository: [
          {
            name: "康强电子",
            number: "3300股",
            mcapitalization: "101亿",
            cvalue: "11.2",
            pvalue: "15.2",
            position: "34.25%",
            todaypal: "-1782 / -2.71%",
            totalpal: "-3465 / -5.14%"
          },
          {
            name: "**********",
            number: "4700股",
            mcapitalization: "**********",
            cvalue: "**********",
            pvalue: "**********	",
            position: "40.31%",
            todaypal: "	2773 / 3.83%",
            totalpal: "723 / 0.97%"
          }
        ],
        adjustRepository: [
          {
            name: "**********",
            date: "2019-08-01",
            sellOrBuy: "卖",
            num: "-3200股",
            position: "	25.7%",
            averagePrice: "**********"
          },
          {
            name: "**********",
            date: "2019-08-01",
            sellOrBuy: "买",
            num: "	2300股",
            position: "	25.1%",
            averagePrice: "**********"
          }
        ]
      },
      Super_Stock_Card_List: [
        {
          id: 1,
          name: "康强电子",
          increase: "21.2%",
          buyingPrice: 11.1,
          sellingPrice: 16,
          holdingDays: 10
        },
        {
          id: 2,
          name: "康强电子",
          increase: "21.2%",
          buyingPrice: 11.1,
          sellingPrice: 16,
          holdingDays: 10
        },
        {
          id: 3,
          name: "康强电子",
          increase: "21.2%",
          buyingPrice: 11.1,
          sellingPrice: 16,
          holdingDays: 10
        }
      ],
      currRepositoryData: [],
      adjustRepositoryData: [],
      currRepositoryDataMobile: [],
      adjustRepositoryDataMobile: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      echart1_1: {
        option: {
          tooltip: {
            trigger: "item",
            formatter: "超过{d}%"
          },
          series: [
            {
              name: "智子1号",
              type: "pie",
              radius: ["50%", "80%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: "center",
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{ value: 80, name: "智子1号" }, { value: 20, name: "" }]
            }
          ]
        }
      },
      echart1_2: {
        option: {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: [
            {
              name: "持仓",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: [
                { value: 99, name: "持仓" },
                { value: 1, name: "银行存款" }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        }
      },
      echart1_3: {
        option: {}
      },
      echart2_1: {},
      echart2_2: {}
    };
  },
  created() {
    this.currRepositoryData = this.strategy_info.currRepository;
    this.adjustRepositoryData = this.strategy_info.adjustRepository;
    this.echart2_1 = this.echart1_3;
    this.echart2_2 = this.echart1_1;
    this.mergeData();
  },
  mounted() {
    this.initEchart(this.$refs.echart1_1);
    this.initEchart(this.$refs.echart1_2);
    this.test();
    this.initEchart(this.$refs.echart1_3);

    this.initEchart(this.$refs.echart2_1);
    this.initEchart(this.$refs.echart2_2);
  },
  methods: {
    initEchart(ele) {
      // console.log(ele);
      var myChart = echarts.init(ele);
      myChart.setOption(this[ele.className].option);
    },
    test() {
      var base = +new Date(1968, 9, 3);
      var oneDay = 24 * 3600 * 1000;
      var date = [];

      var data1 = [Math.random() * 300];
      var data2 = [Math.random() * 300];
      for (var i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
        data1.push(Math.round((Math.random() - 0.5) * 20 + data1[i - 1]));
        data2.push(Math.round((Math.random() - 0.5) * 10 + data2[i - 1]));
      }

      var option = {
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          }
        },
        legend: {
          x: "right",
          y: 10,
          padding: 10,
          itemGap: 10,
          data: ["策略收益", "沪深300"]
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: "value",
          position: "right",
          boundaryGap: [0, "100%"],
          axisLabel: {
            formatter: "{value}%"
          },
          axisTick: {
            show: true,
            inside: true
          }
        },
        dataZoom: [
          //区域大小控制组件
          {
            type: "inside",
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [
          {
            name: "策略收益",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(69, 114, 167)"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(188, 197, 207)"
                },
                {
                  offset: 1,
                  color: "rgb(180, 190, 200)"
                }
              ])
            },
            data: data1
          },
          {
            name: "沪深300",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(255, 90, 90)"
            },
            data: data2
          }
        ]
      };
      this.echart1_3.option = option;
    },
    mergeData() {
      this.strategy_info.currRepository.forEach(element => {
        var tempobj = {
          name: element.name,
          numberAndmcapitalization:
            element.number + "\n" + element.mcapitalization,
          cValueAndPValue: element.cvalue + "\n" + element.pvalue,
          totalpal: element.totalpal
        };
        this.currRepositoryDataMobile.push(tempobj);
      });
      this.strategy_info.adjustRepository.forEach(element => {
        var tempobj = {
          name: element.name,
          sellOrBuy: element.sellOrBuy,
          position: element.position,
          averagePrice: element.averagePrice
        };
        this.adjustRepositoryDataMobile.push(tempobj);
      });
    }
  },
  components: {
    Header,
    Super_Stock_Card
  }
};
</script>

<style scoped>
.black {
  color: #121212;
  font-size: 15px;
}
.big-red {
  color: #f00 !important;
  font-size: 30px;
  font-weight: bolder;
}
.median-red {
  font-size: 18px;
  font-weight: bold;
  color: #f11 !important;
}
.red {
  color: #f11 !important;
}
.brick {
  height: 50px;
}
.shadow-border {
  border-radius: 5px;
  box-shadow: 0px 0px 10px 1px #dfdfdf;
  background-color: #fff;
}
.clear {
  clear: both;
}
@media screen and (min-width: 981px) {
  .Shop_Detail_Mobile {
    display: none;
  }
  .Shop_Detail_PC {
    display: block;
    width: 100%;
    background-color: #efefef;
    border-top: 1px solid #fff;
  }
  .content {
    width: 80%;
    margin: 60px auto 0px;
    border-top: 1px solid #efefef;
  }
  .display_num1 {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-top: 30px;
  }
  .display_num1 .left,
  .display_num1 .right {
    border-radius: 5px;
    box-shadow: 0px 0px 10px 1px #dfdfdf;
    background-color: #fff;
  }
  .display_num1 .left {
    width: 65%;
    height: 360px;
    box-sizing: border-box;
    padding: 12px 0px 0px 20px;
  }
  .display_num1 .right {
    width: 30%;
    height: 360px;
  }
  .display_num1 .left .header {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
  }
  .display_num1 .left .header .title {
    width: 50%;
  }
  .display_num1 .left .header .title h2 {
    width: 100%;
    line-height: 50px;
    font-size: 29px;
  }
  .display_num1 .left .header .title .el-tag {
    margin: 8px 5px 0px 0px;
  }
  .display_num1 .left .header .sell {
    list-style-type: none;
    width: 40%;
    margin-top: 40px;
  }
  .display_num1 .left .header .sell li {
    line-height: 40px;
    font-size: 13px;
    color: #9a9a9a;
  }
  .display_num1 .left > ul {
    list-style-type: none;
    height: 100px;
    margin: 20px 0px;
  }
  .display_num1 .left > ul li {
    float: left;
    width: 25%;
    height: 100px;
  }
  .display_num1 .left > ul li p {
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin: 0px;
    text-align: center;
  }
  .display_num1 .left > ul li .title {
    font-size: 13px;
  }
  .display_num1 .left > ul li .content {
    font-size: 26px;
    font-weight: bolder;
    color: #121212;
  }
  .display_num1 .right .echart1_1 {
    width: 100%;
    height: 240px;
  }
  .display_num1 .right > p {
    font-size: 14px;
    color: #9a9a9a;
    text-align: center;
  }
  .display_num1 .right .button-box {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
  }
  .display_num1 .right .el-button {
    width: 45%;
    height: 50px;
    margin-top: 10px;
    font-size: 18px;
  }
  .display_num2 {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
  }
  .display_num2 .super-stock-box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .display_num2 .super-stock-box .Super_Stock_Card {
    width: 32%;
    margin: 20px 0px;
  }
  .display_num3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-top: 40px;
  }
  .display_num3 .left,
  .display_num3 .right {
    border-radius: 5px;
    box-shadow: 0px 0px 10px 1px #dfdfdf;
    background-color: #fff;
  }
  .display_num3 .left {
    width: 25%;
    height: 480px;
    box-sizing: border-box;
    padding: 5px;
  }
  .display_num3 .right {
    width: 73%;
    height: 480px;
  }
  .display_num3 .left h4 {
    margin-top: 15px;
    line-height: 40px;
    text-indent: 5px;
    color: #565656;
  }
  .display_num3 .left .echart1_2 {
    width: 100%;
    height: 150px;
  }
  .display_num3 .detail {
    list-style-type: none;
    margin-top: 20px;
  }
  .display_num3 .detail li {
    height: 40px;
    margin-top: 10px;
  }
  .display_num3 .detail li .title {
    display: inline-block;
    width: 40%;
    text-align: right;
  }
  .display_num3 .detail li .content {
    display: inline-block;
    width: 60%;
    border: none;
    margin: 0px;
  }
  .display_num3 .right {
    box-sizing: border-box;
    padding: 5px;
  }
  .display_num3 .right h4 {
    margin-top: 15px;
    line-height: 40px;
    text-indent: 5px;
    color: #565656;
  }
  .display_num3 .right .echart1_3 {
    width: 98%;
    height: 80%;
  }
  .display_num4 {
    padding: 5px 5px 0px 15px;
    box-sizing: border-box;
    margin-top: 30px;
    border-radius: 5px;
    border-top: 1px solid #fff;
    box-shadow: 0px 0px 10px 1px #dfdfdf;
    background-color: #fff;
  }
  .display_num4 h4 {
    margin-top: 15px;
    margin-bottom: 20px;
    line-height: 40px;
    color: #565656;
    border-bottom: 1px solid #efefef;
  }
  .display_num4 h4 span {
    display: inline-block;
    height: 100%;
    border-bottom: 4px solid #7a7a7a;
  }
  .display_num4 .line-text {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    line-height: 45px;
  }
  .display_num4 .line-text > .text {
    width: 6%;
    font-size: 14px;
    color: #8a8a8a;
  }
  .display_num4 .line-text .line {
    width: 65%;
    height: 0px;
    margin-top: 1.7%;
    border-bottom: 2px solid #dfdfdf;
  }
  .display_num4 .line-text .history {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    width: 29%;
  }
  .display_num4 .line-text .history > .text {
    font-size: 14px;
    color: #8a8a8a;
  }
}
@media screen and (max-width: 980px) {
  .Shop_Detail_PC {
    display: none;
  }
  .Shop_Detail_Mobile {
    display: block;
    border-top: 1px solid #fff;
  }
  .trend-box {
    margin-top: 55px;
  }
  .trend-box > .title {
    line-height: 34px;
    font-size: 26px;
    text-align: center;
    color: #121212;
  }
  .trend-box .echart2_1 {
    width: 100%;
    height: 340px;
    padding-right: 20px;
  }
  .introduce {
    margin-top: 20px;
    border-top: 1px solid #fff;
  }
  .introduce .income-part .left {
    float: left;
    width: 49.5%;
    border-right: 0.5px solid #dfdfdf;
  }
  .introduce .income-part .left > .title {
    line-height: 34px;
    margin-top: 34px;
    font-size: 18px;
    text-align: center;
    color: #7a7a7a;
  }
  .introduce .income-part .left > .content {
    line-height: 70px;
    text-align: center;
  }
  .introduce .income-part .right {
    float: left;
    width: 49.5%;
    border-left: 0.5px solid #dfdfdf;
  }
  .introduce .income-part .right .echart2_2 {
    width: 100%;
    height: 100px;
  }
  .introduce .income-part .right .explain {
    line-height: 24px;
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
    color: #7a7a7a;
  }
  .introduce .months-income {
    list-style-type: none;
    margin-top: 5px;
  }
  .introduce .months-income li {
    float: left;
    width: 25%;
    background-color: #fff;
  }
  .introduce .months-income li > .title {
    line-height: 36px;
    margin-top: 14px;
    color: #7a7a7a;
    text-align: center;
  }
  .introduce .months-income li > .content {
    line-height: 46px;
    color: #121212;
    text-align: center;
  }
  .detail-box {
    margin-top: 20px;
  }
  .detail-box > .title {
    line-height: 34px;
    text-indent: 10px;
    color: #7a7a7a;
  }
  .operate {
    position: fixed;
    width: 100%;
    bottom: 0px;
  }
  .operate .consult,
  .operate .subscribe {
    padding: 14px 0px;
    margin: 0px;
    width: 50%;
  }
}
</style>
